<template>
  <div class="bookrack">
    <!-- 初始化页面 -->
    <div class="RackContent" v-show="!isDelPage">
      <h3>书架</h3>
      <div class="tabHb">
        <div class="typeItem">
          <span class="history">
            <router-link to="/bookHistory">浏览历史</router-link>
          </span>
          <span class="compile" @click="btnDel">编辑</span>
        </div>
      </div>
      <div class="RackItem">
        <div class="item" v-for="(item, index) in BookList" :key="index">
          <div class="img">
            <router-link :to="`/bookDetails/${item.id}`">
              <img
                :src="'http://statics.zhuishushenqi.com' + item.cover"
                alt=""
                class="bookimg"
              />
            </router-link>
          </div>
          <div class="name">{{ item.title }}</div>
        </div>
        <div class="item">
          <div class="img">+</div>
        </div>
      </div>
    </div>

    <!-- 删除书籍页面 -->
    <div class="DelRackContent" v-show="isDelPage">
      <!-- <h3>书架</h3> -->
      <div class="tabHb">
        <div class="Allcheck" @click="btnAll">
          {{ isquan ? "取消全选" : "全选" }}
        </div>
        <div class="bookLen">
          <div class="books">全部书籍</div>
          <div class="bookNum">已选择{{ activeLen }}本书</div>
        </div>
        <div class="typeItem">
          <span class="compile" @click="DelOk">完成</span>
        </div>
      </div>
      <div class="RackItem">
        <div class="item" v-for="(item, index) in BookList" :key="index">
          <div class="img" @click="btnIsdel(index)">
            <img
              :src="'http://statics.zhuishushenqi.com' + item.cover"
              alt=""
              class="bookimg"
            />
            <div class="checkimg" v-show="isImgShow">
              <img :src="imgSrc" alt="" ref="gou" />
            </div>
          </div>
          <div class="name">{{ item.title }}</div>
        </div>
      </div>
      <div class="footer" v-show="isDelBom">
        <div class="on" @click="delBook">
          <img src="../assets/delimg.png" alt="" />
          <span>删除</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      BookList: [],
      showList: true,
      isImgShow: true,
      imgSrc: require("../assets/gou01.png"),
      isDelPage: false,
      activeLen: 0,
      isquan: false,
      isDelBom: false,
    };
  },
  created() {
    this.createFun();
  },
  methods: {
    createFun() {
      let rackData = localStorage.getItem("RackList");
      rackData = JSON.parse(rackData);
      this.BookList = rackData;
    },
    btnDel() {
      this.isDelPage = true;
    },
    DelOk() {
      this.isDelPage = false;
      let imgDom = this.$refs.gou;
      for (var i = 0; i < imgDom.length; i++) {
        imgDom[i].src = require("../assets/gou01.png");
      }
      this.isquan = false;
      this.activeLen = 0;
    },
    btnAll() {
      // 全选按钮
      this.isquan = !this.isquan;
      let imgDom = this.$refs.gou;
      if (this.isquan) {
        for (var i = 0; i < imgDom.length; i++) {
          imgDom[i].src = require("../assets/gou03.png");
        }
        this.activeLen = imgDom.length;
      } else {
        for (var k = 0; k < imgDom.length; k++) {
          imgDom[k].src = require("../assets/gou01.png");
        }
        this.activeLen = 0;
      }
      this.isActiveImg();
    },
    btnIsdel(index) {
      let imgDom = this.$refs.gou;

      // 点击切换图片
      if (imgDom[index].src == require("../assets/gou01.png")) {
        imgDom[index].src = require("../assets/gou03.png");
      } else if (imgDom[index].src == require("../assets/gou03.png")) {
        imgDom[index].src = require("../assets/gou01.png");
      }

      // 点击获取得到删除数量
      let activeNum = 0;
      for (var i = 0; i < imgDom.length; i++) {
        if (imgDom[i].src == require("../assets/gou03.png")) {
          activeNum++;
          if (activeNum == imgDom.length) {
            this.isquan = true;
          } else {
            this.isquan = false;
          }
        }
      }
      this.activeLen = activeNum;
      this.isActiveImg();
    },
    delBook() {
      // 最笨的方法
      let imgDom = this.$refs.gou;
      console.log(imgDom);
      let racklist = localStorage.getItem("RackList");
      if (racklist) {
        let data = JSON.parse(racklist);
        let arr = [];
        let newArr = [];
        console.log(data);
        for (var i = 0; i < imgDom.length; i++) {
          if (imgDom[i].src == require("../assets/gou03.png")) {
            arr.push(i);
            console.log(i);
          }
        }
        let mius = 0;
        for (var k = 0; k < arr.length; k++) {
          if (k > 0) {
            mius++;
            console.log("第二个开始的元素" + arr[k]);
            console.log("减去的数" + mius);
            newArr.push(arr[k] - mius);
          } else {
            newArr.push(arr[k]);
          }
        }
        newArr.forEach(function (item) {
          data.splice(item, 1);
        });
        localStorage.setItem("RackList", JSON.stringify(data));
        this.createFun();
      } else {
        console.log("书架里面没有书");
      }
      this.activeLen = 0;
      this.isActiveImg();
    },
    isActiveImg() {
      let imgDom = this.$refs.gou;
      let isHei = imgDom.some(function (item) {
        return item.src == require("../assets/gou03.png");
      });
      console.log(isHei);
      if (isHei) {
        this.isDelBom = true;
      } else {
        this.isDelBom = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bookrack {
  .RackContent {
    padding-bottom: 50px;
    h3 {
      margin-left: 4vw;
    }
    .tabHb {
      margin-right: 4vw;
      display: flex;
      .typeItem {
        margin-left: auto;
        font-size: 14px;
        font-weight: bold;
        .history {
          padding-right: 3vw;
          border-right: 2px solid #e8e8e8;
          a {
            color: black;
          }
        }
        .compile {
          padding-left: 3vw;
        }
      }
    }
    .RackItem {
      display: flex;
      flex-wrap: wrap;
      .item {
        margin-left: 7vw;
        margin-top: 6vw;
        .img {
          position: relative;
          width: 24vw;
          height: 32vw;
          border-radius: 4px;
          overflow: hidden;
          .bookimg {
            height: 100%;
            width: 100%;
          }
        }
        &:last-child {
          background-color: #e8e8e8;
          height: 32vw;
          line-height: 32vw;
          font-size: 20vw;
          text-align: center;
          color: #ccc;
        }
      }
      .name {
        font-size: 14px;
        width: 24vw;
      }
    }
  }

  // 删除书籍样式
  .DelRackContent {
    padding-bottom: 90px;
    .tabHb {
      display: flex;
      justify-content: space-between;
      margin: 4vw 6vw 0vw 6vw;
      .Allcheck {
        flex: 1;
        display: flex;
        align-items: center;
        font-weight: bold;
      }
      .bookLen {
        flex: 1;
        .books {
          display: flex;
          justify-content: center;
          font-size: 18px;
          font-weight: bold;
        }
        .bookNum {
          display: flex;
          justify-content: center;
          font-size: 14px;
          color: #aaa;
        }
      }
      .typeItem {
        flex: 1;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .RackItem {
      display: flex;
      flex-wrap: wrap;
      .item {
        margin-left: 7vw;
        margin-top: 6vw;
        .img {
          position: relative;
          width: 24vw;
          height: 32vw;
          border-radius: 4px;
          overflow: hidden;
          .bookimg {
            height: 100%;
            width: 100%;
          }
          .checkimg {
            position: absolute;
            right: 4px;
            bottom: 0px;
            img {
              width: 22px;
              height: 22px;
            }
          }
        }
      }
      .name {
        font-size: 14px;
        width: 24vw;
      }
    }
    .footer {
      width: 100vw;
      background: #e3e3e3;
      position: fixed;
      bottom: 50px;
      left: 0px;
      display: flex;
      justify-content: center;
      .on {
        width: 50px;
        height: 40px;
        line-height: 40px;
        img {
          width: 18px;
          height: 18px;
          vertical-align: middle;
        }
        span {
          color: rgb(250, 77, 61);
          font-size: 14px;
          padding-left: 4px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
